<template>
  <div class="user">
    <!--按钮—-->
    <div class="btns">
        <el-form size="small" inline  :model="param" style="text-align: center">
          <br>
           <el-form-item>
          <el-button size="mini"  icon="el-icon-search" @click="loaduser">搜索</el-button>
        </el-form-item>
        <el-form-item label="">
            <el-input placeholder="请输入真实姓名" v-model="param.realname"></el-input>
        </el-form-item>
     <div style="text-align:right">
        <el-button  size="small" style="text-align:right" icon="el-icon-zoom-in" @click="toAddHandler">新增</el-button>
       <el-button   size="small" style="text-align:right" icon="el-icon-download" @click="downloadHandler">导出</el-button>
      </div> 
      </el-form>
    </div>
    <!--/按钮—-->
    <br/>
    <!--表格—-->
    <el-table :data="user" style="width: 100%">
      <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="序号">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="用户类别：">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="密码：">
              <span>{{ props.row.password }}</span>
            </el-form-item>
            <el-form-item label="电话：">
              <span>{{ props.row.telephone }}</span>
            </el-form-item>
            <el-form-item label="真实姓名：">
              <span>{{ props.row.realname }}</span>
            </el-form-item>
            <el-form-item label="性别：">
              <span>{{ props.row.gender }}</span>
            </el-form-item>
            <el-form-item label="出生日期:">
              <span>{{ props.row.birth }}</span>
            </el-form-item>
            <el-form-item label="email:">
              <span>{{ props.row.email }}</span>
            </el-form-item>
            <el-form-item label="签名:">
              <span>{{ props.row.autograph }}</span>
            </el-form-item>
            <el-form-item label="备注:">
              <span>{{ props.row.isFree }}</span>
            </el-form-item>
            <el-form-item label="状态:">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="用户头像:">
              <span>{{ props.row.userFace }}</span>
            </el-form-item>
            <el-form-item label="身份证号:">
              <span>{{ props.row.idCard }}</span>
            </el-form-item>
            <el-form-item label="地址:">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="国家:">
              <span>{{ props.row.nation }}</span>
            </el-form-item>
            <el-form-item label="登录时间:">
              <span>{{ props.row.registerTime }}</span>
            </el-form-item>
            <el-form-item label="简介:">
              <span>{{ props.row.introduce }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" prop="id" align="center"> </el-table-column>
      <el-table-column label="真实姓名" prop="realname" align="center"></el-table-column>
      <el-table-column label="电话" prop="telephone" align="center"></el-table-column>
      <el-table-column label="地址" prop="address" align="center"></el-table-column>
      <el-table-column label="操作" prop="operation" align="center">
          <template slot-scope="scope">
          <el-button  size="mini"  class="el-icon-edit" @click="editHandler(scope.row)" >修改</el-button >
          <el-button type="danger" size="mini" class="el-icon-delete" @click="deleteHandler(scope.row)"></el-button>
        </template>
 </el-table-column>
    </el-table>
    <!--/表格—-->
  </div>
</template>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<script>
import {del,get} from "@/utils/request";
export default {
  data() {
    return {
     param:{},
      user:[],
    };
  },
  methods: {
    downloadHandler(){
        window.location.href="http://8.131.68.179:9999/base_user/download?realname"+this.param.realname
    },

          editHandler(row){
      // 跳转到修改页面 （新增页面）
      // 携带当前行的数据
      this.$router.push({
        path:"/user/create",    //跳转的路由（前端）
        query:row   // 携带参数
      })
    },
    // 删除事件处理函数
      deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://8.131.68.179:9999/base_user/deleteByID";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loaduser();
        });
      });
    },
    toAddHandler(row) {
      this.$router.push("/user/create")  //跳转的路由（前端）
    },
    loaduser() {
      let url = "http://8.131.68.179:9999/base_user/select";
      get(url,this.param).then(resp => {
        this.user = resp.data;
      });
    },
  },
  
  created() {
    this.loaduser();
  },
};
</script>
<style scoped>
 .btns{
    margin-bottom: 0.5em;
 }
.el-form {
    background:#a9e1f0;
    }
</style>